<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>部门信息</title>
    <link rel="stylesheet" href="./common/element/element.css">
</head>

<body>
    <div id="app">
        <h2>部门信息</h2>
        <el-row>
            <el-col :span="18" style="margin-bottom: 10px">
                <el-input v-model="keywords" style="width: 260px;" placeholder="请输入部门名称"></el-input>
                <el-button type="info">查询</el-button>
                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                <el-button type="success">刷新</el-button>
                <el-button type="warning">批量删除</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 99%">
            <el-table-column type="selection" width="45" align="center"></el-table-column>
            <el-table-column prop="deptname" label="部门名称" align="center"></el-table-column>
            <el-table-column prop="manager" label="负责人" align="center"></el-table-column>
            <el-table-column prop="address" label="办公地址" align="center"></el-table-column>
            <el-table-column prop="addtime" label="创建日期" align="center"></el-table-column>
            <el-table-column prop="memo" label="备注" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template slot-scope="scope">

                    <el-button type="primary" icon="el-icon-edit" size="small" circle @click="dialogVisible = true">
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="margin-top: 10px">
            <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum"
                :page-size="pageSize" >
            </el-pagination>
        </el-row>

        <el-dialog title="部门信息" :visible.sync="dialogVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="部门名称">
                    <el-input v-model="form.deptname" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="form.manager" placeholder="请输入负责人"></el-input>
                </el-form-item>
                <el-form-item label="办公地址">
                    <el-input v-model="form.address" placeholder="请输入办公地址"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.memo" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>

    <script src="./common/js/jquery-1.9.0.min.js"></script>
    <script src="./common/js/vue.js"></script>
    <script src="./common/js/axios.min.js"></script>
    <script src="./common/element/element.js"></script>
    <script>
        const vue = new Vue({
            el: '#app',  
            data: { 
                tableData: [
                    {
                        "deptid": "D20220629210342943354",
                        "deptname": "A部",
                        "manager": "张三",
                        "address": "二楼201",
                        "addtime": "2022-06-29",
                        "memo": "开发分部二部"
                    },
                    {
                        "deptid": "D20220701220133493163",
                        "deptname": "B部",
                        "manager": "李四",
                        "address": "二楼301",
                        "addtime": "2022-07-01",
                        "memo": "无"
                    }
                ],
                pageSize: 8, // 每页显示行数
                pageNum: 1, // 页码
                total: 0, //数据总数
                dialogVisible: false, //增、改对话框是否显示
                form: {}, // 表单数据
                keywords: '' // 查询关键字

            }
        });
    </script>


</body>

</html>